<template>

  <div class="rzcontent">

    <div v-if="binfo.sign_status==1"
         style="height: 40px; background-color: #16d655; width: 100%; color: #fff; text-align: center; line-height: 40px; font-size: 16px; margin-bottom: 10px;">
      签约完成
    </div>

    <div class="basicInfo">

      <div class="flexitem">
        <div class="nameitem">姓名</div>
        <div class="fdiv">{{binfo.name}}</div>
      </div>
      <div class="flexitem">
        <div class="nameitem nosigned" :class="{signed:binfo.sign_status==1}" style="">性别</div>

        <div class="fdiv" v-if="binfo.sign_status!=1">
          <el-radio v-model="msex" @change="changesex" label="1">男</el-radio>
          <el-radio v-model="msex" @change="changesex" label="2">女</el-radio>
        </div>
        <div class="fdiv" v-else>
          {{msex ==1?'男':'女'}}
        </div>

      </div>
      <div class="flexitem">
        <div class="nameitem">手机号</div>
        <div class="fdiv">{{binfo.phone}}</div>
      </div>

      <!--<div class="flexitem">
        <div class="nameitem">证件类型</div>
        <div class="fdiv">身份证</div>
      </div>-->
      <div class="flexitem">
        <div class="nameitem">证件号码</div>
        <div class="fdiv">{{binfo.id_card}}</div>
      </div>

      <div class="flexitem" style="border-bottom: none;">
        <div class="nameitem nosigned" :class="{signed:binfo.sign_status==1}">身份认证</div>
        <div class="fdiv"><label class="linb camera_icon" :class="{disab:(!canopt || binfo.sign_status==1)}" @click="openuploadcard">上传身份证>></label>
        </div>
      </div>

    </div>

    <div class="basicInfo" style="margin-top: 10px">


      <div class="flexitem">
        <div class="nameitem">银行简称</div>
        <div class="fdiv">{{binfo.bank_name}}</div>
      </div>
      <div class="flexitem" style="border-bottom: none;">
        <div class="nameitem">银行卡号</div>
        <div class="fdiv">{{binfo.bank_account}}</div>
      </div>

    </div>

    <!--v-if="productorInfo.productId == 7 || productorInfo.productId == 10"-->
    <div
      v-if="(productorInfo.productId == 7 || productorInfo.productId == 10) && appidval!='C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7'"
      class="basicInfo" style="margin-top: 10px">

      <div class="flexitem">
        <div class="nameitem nosigned" :class="{signed:binfo.sign_status==1}">工商截图上传</div>
        <div class="fdiv"><label class="linb pr_icon" :class="{disab:(!canopt || binfo.sign_status==1)}" @click="openuploadcard2">上传工商截图>></label></div>
      </div>
      <div class="pross" @click="viewPro">查看“工商截图”操作步骤>></div>

    </div>


    <el-row>
      <div class="optbtns" v-show="!binfo.sign_status">
        <!--<el-button type="info" @click="openContractMb()" v-show="(appidval!='C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7')">
          查看合同
        </el-button>-->
        <el-button style="background-color: #3E8CF3; width: 90%; height: 40px; " type="primary" @click="goSign()" v-if="binfo.sign_status!=1">提交信息</el-button>
        <div style="color: #3E8CF3; margin-top: 6px; padding-bottom: 4px; font-size: 12px; border-bottom: 1px solid #3E8CF3; width: max-content; margin: 8px auto;" type="info" @click="openContractMb()" v-show="(appidval!='C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7')">
          我想先看合同
        </div>
      </div>
      <div class="optbtns" v-show="binfo.sign_status">
        <el-button style="background-color: #3E8CF3; width: 90%; height: 40px; " type="info" @click="openContract()" v-show="(appidval!='C0B5F57CBF5EE84E3FF800190CE16B09' && appidval!='B368C6B3B663B08DE84452C1E6F96FF7')">
          查看合同
        </el-button>

      </div>

    </el-row>


  </div>
</template>

<script>

  // import authperson from './basicAuthPerson'
  import {HOST, IMG_URL} from '@/constants'

  export default {
    name: "renzheng",
    data() {
      return {
        msex: '2',
        isqz: 0,
        productorInfo: {},
        binfo: {},
        imgsUrl: {
          zmurl: '',
          fmurl: '',
          gsurl: ''
        },
        return_url: '',
        contractId: '',  //合同id
        appidval: '',
        canopt: false
      }
    },
    mounted() {

      this.isqz = this.$route.query.isqz || 1


      window.appid = this.$route.query.appKey || ''
      this.appidval = this.$route.query.appKey || ''
      this.return_url = this.$route.query.return_url || ''
      this.getinfo();

    },
    // components:{authperson},
    methods: {
      openContractMb(){
        var contractTemp = ''
        if(this.productorInfo.productId == 7 || this.productorInfo.productId == 10){//创业宝合同模板
          contractTemp = 'cybContract'
        }
        if(this.productorInfo.productId == 6 || this.productorInfo.productId == 9){//分工宝合同模板
          contractTemp = 'fgbContract'
        }
        if(this.productorInfo.productId == 3 || this.productorInfo.productId == 4 || this.productorInfo.productId == 8){//用工宝合同模板
          contractTemp = 'ygbContract'
        }
        if(!contractTemp){
          alert('合同模板制作中...')
        }
          this.$card({
            name: 'ssppContranct',
            width: '100%',
            title: '合同模版',
            funCode: contractTemp,
            props: {
              binfo:this.binfo
            },
            callback: (close, str) => {
            close()
            // this.$refs.table.reload()
          }
        })
      },
      changesex(value){
        window.sex = value
        this.binfo.sex = value
      },
      goSign() {
        if(!this.binfo.id_card || !this.binfo.name || !this.binfo.bank_account) {
          this.$message({
            message: '请检查姓名、证件号码、银行卡号是否填写！',
            showClose: true,
            type: 'error'
          });
          return false
        }

        if (this.binfo.sign_status == 1) {
          // alert('您已签约')
          this.$message({
            message: '您已签约',
            type: 'error'
          });
          return false
        }

        if (!this.imgsUrl.zmurl || !this.imgsUrl.fmurl) {
          // alert('请上传身份证正反面图片');
          this.$message({
            message: '请上传身份证正反面图片',
            showClose: true,
            type: 'error'
          });
          return false
        }
        if (!this.binfo.sex) {
          this.$message({
            message: '请选择性别',
            showClose: true,
            type: 'error'
          });
          return false
        }
        if ((this.productorInfo.productId == 7 || this.productorInfo.productId == 10) && this.appidval != 'C0B5F57CBF5EE84E3FF800190CE16B09' && this.appidval != 'B368C6B3B663B08DE84452C1E6F96FF7') {
          if (!this.imgsUrl.gsurl) {
            this.$message({
              message: '请上传工商截图',
              showClose: true,
              type: 'error'
            });
            return false;
          }
        }
        if (this.isqz == 1) {//需要手写签名
          this.signact();

        } else {//不需手写签名
          this.quickSign();
        }
      },
      quickSign() {
        this.islaodings = this.$loading({
          lock: true,
          text: '签约中,请稍后...',
          spinner: 'el-icon-loading',

        });

        //进行签名
        this.request.post('employees/savecardinfo', {
          // hand_sign: res.data,
          sex: window.sex,
          company_id: this.$route.query.id,
          appKey: window.appid,
          cmloading: true
        }).then(result => {

          var sidata = result
          this.showDisabled = false

          setTimeout(() => {
            this.islaodings.close()
          }, 200)

          if (sidata.code == 0) {
            this.$alert('签约成功', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              center: true
            }).then(res => {
              //alert('调转到第三方网址')
              if (this.return_url) {
                window.location.href = this.return_url;
              } else {
                //window.location.reload()
                this.$router.replace({
                  path: '/authPerson',
                  query: {
                    funCode: "renzheng",
                    appKey: this.$route.query.appKey,
                    id: this.binfo.out_members_id
                  }
                })
                /*this.$message({
                    message: '回调错误',
                    type: 'error'
                });*/
              }

            })

          } else {
            alert(sidata.msg)
          }
        }, error => {
          this.islaodings.close();
          alert('签约失败。')
        })
      },
      getinfo() {
        var pid = this.$route.query.id || ''
        var sdata = this.$route.query.data || ''
        //if (!pid) return false

        // alert(sdata)
        if (!pid && !sdata) {
          return false;
        }
        var vdata = '';
        if (pid) {
          vdata = {id: pid, appKey: window.appid}
        }
        if (sdata) {
          // alert('')
          //   console.log(decodeURIComponent(sdata))
          // return false;
          //   console.log(sdata)
          // var x = sdata.replace(/\s+/g,"_")
          // console.log(x)
          // console.log(sdata)
          vdata = {appKey: window.appid, data: decodeURIComponent(sdata)}
          // vdata = {appKey: window.appid, data: x}
        }
        // alert(JSON.stringify(vdata))

        this.request.post('employees/info', vdata).then(res => {
          if (res.code == 0) {
            this.canopt = true;
            // alert(JSON.stringify(res.data))
            this.binfo = res.data;
            this.contractId = res.contracts;    //合同id
            localStorage.setItem('out_members_id', res.data.out_members_id)
            window.mid = res.data.out_members_id;
            if (res.data.zidimg) {
              this.imgsUrl.zmurl = IMG_URL + res.data.zidimg
            }
            if (res.data.fidimg) {
              this.imgsUrl.fmurl = IMG_URL + res.data.fidimg
            }
            if (res.data.industry_pic) {
              this.imgsUrl.gsurl = IMG_URL + res.data.industry_pic
            }
            window.sex = res.data.sex
            this.msex = res.data.sex + ''
            this.getProductor();
          } else {
            this.canopt = false;
            alert(res.msg)

          }
        }, error => {
          //alert('请求失败')
          this.$message({
            message: '系统繁忙，请关闭后重新打开',
            type: 'warning'
          });
          setTimeout(() => {
            //window.history.go(-1);
          }, 200)

        })

      },
      getProductor() {
        this.request.get('employees/getProductType', {out_members_id: this.binfo.out_members_id}).then(res => {
          if (res.code == 0) {
            this.productorInfo = res;
            // alert(this.productorInfo.productId)
          } else {
            alert(res.msg)
          }
        }, error => {
          alert('获取产品失败')
        })
      },
      signact() {
        this.$bottomCard({//用工宝签约
          name: 'qianzi',
          width: '100%',
          title: '手写签字',
          funCode: "qianzi",
          props: {
            qname: this.binfo.name,
            cmid: this.$route.query.id,
            return_url: this.return_url
          },
          callback: (close, str) => {
            var source = this.$route.query.source || '';
            var returnUrl = this.$route.query.return_url || ''

            if(!source || source=='h5'){

              if (returnUrl) {
                location.href = returnUrl
              } else {
                this.$router.replace({
                  path: '/authPerson',
                  query: {
                    funCode: "renzheng",
                    appKey: this.$route.query.appKey,
                    id: this.binfo.out_members_id
                  }
                })
                // location.reload()
              }

            }else if(source=='android'){
              // alert('android')
              setTimeout(() => {
              localService.authResultFunc(str);
              }, 500)
            }else if(source=='ios'){
              setTimeout(() => {
              // alert('ios')
              window.webkit.messageHandlers.authResultFunc.postMessage({result:str});
              }, 500)
            }else if(source=='miniprogram'){
              // alert('miniprogram')

              setTimeout(() =>{
                wx.miniProgram.postMessage({
                  'data':{
                    'result':str
                  }
                })
                wx.miniProgram.navigateBack();
              }, 500)

            }
            setTimeout(() => {
              close()
            }, 200)

            // this.$refs.table.reload()
          }
        })
      },

      openuploadcard2() {
        if(this.binfo.sign_status==1 || this.canopt==false) {
          return false;
        }
        let self = this;
        this.$card({//
          name: 'mobileGs',
          width: '100%',
//          title: '上传工商截图',
          funCode: "mobileGs",
          props: {
            binfo: this.binfo
          },
          callback: (close, str) => {
            self.binfo.industry_pic = str;
            self.imgsUrl.gsurl = self.binfo.industry_pic;
            self.$message({
              message: '上传成功',
              type: 'success',
              showClose: true
            });
            //close()
            // this.$refs.table.reload()
          }
        })
      },
      openuploadcard() {
        if(this.binfo.sign_status==1 || this.canopt==false) {
          return false;
        }
        this.$card({//
          name: 'mobileCard',
          width: '100%',
//          title: '上传身份证',
          funCode: "mobileCard",
          props: {
            binfo: this.binfo
          },
          callback: (close, str) => {
            this.$message({
              message: '上传成功',
              type: 'success',
              showClose: true
            });
            this.getinfo();

            //close()
            // this.$refs.table.reload()
          }
        })
      },
      openContract() {
        if(!this.contractId){
          this.$message({
            showClose: true,
            message: '合同正在生成中',
            type: 'warning'
          });
          return false;
        }
        this.request.get('employees/online', {
          appKey:window.appid,
          contracts:this.contractId.contracts

        }).then(res=>{
          if(!res.ContractUrl){
            this.$message({
              showClose: true,
              message: '合同正在生成中',
              type: 'warning'
            });
          }else{
            if(res.ContractUrl.indexOf('http')>-1){
              location.href = res.ContractUrl
            }else{
              this.$message({
                showClose: true,
                message: '合同正在生成中',
                type: 'warning'
              });
            }

          }

        },error=>{
          this.$message({
            showClose: true,
            message: '合同正在生成中',
            type: 'warning'
          });
        })

      },
      viewPro() {
        this.$card({//用工宝签约
          name: 'viewPro',
          width: '100%',
          title: '注册流程查看',
          funCode: "viewPro",
          props: {},
          callback: (close, str) => {
            close()
            // this.$refs.table.reload()
          }
        })

      },
      uploadsucess() {//上传回调

      }
    }
  }
</script>

<style lang="scss" scoped>
  .pross {
    font-size: 13px;
    text-align: right;
    padding: 10px;
    text-decoration: underline;
    color: #E4992F;
  }

  .linb {
    font-weight: bold;
    color: #3e8cf3;
  }

  .basicInfo {
    padding: 10px;
    background: #FFF;
    border-radius: 8px;
  }

  .basicInfo {

  .flexitem {
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    padding: 10px;
    font-size: 13px;

  .fdiv {
    width: 100%;
    text-align: right;
    color: #999;
  }

  .nameitem {
    width: 120px;
    text-align: left;
    color: #999;
  }

  }
  .flexitem:before {
    content: '';
    color: red;
  }

  }

  .proimg {

  img {
    width: 100%;
  }

  h3 {
    font-size: 14px;

  }

  p {
    color: #999;
    padding-top: 0;
    font-size: 13px;

  label {
    color: #08F;
  }

  b {
    color: red;
  }

  }
  }
  .cardsviews {
    margin: 0 30px;
    padding: 20px 0;
    position: relative;

  .cardimgs {
    position: relative;
    overflow: hidden;

  img {
    width: 100%;
  }

  }
  .tipinfo {
    text-align: center;
    color: #999;
  }

  }
  .optbtns {
    padding: 30px;
    text-align: center;
  }

  .rzcontent {
    margin: 10px auto;
    width: 96%;
  }
  .disab {
    color: #b1b1b1;
  }
  .camera_icon{
    position: relative;
  }
  .camera_icon:before{
    content: "";
    background-image: url("/static/camera.png");
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 13px;
    top: 50%;
    margin-top: -7px;
    left: -20px;
    background-position: center;
    background-size: cover;
  }
  .pr_icon{
    position: relative;
  }
  .pr_icon:before{
    content: "";
    background-image: url("/static/pr.png");
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 13px;
    top: 50%;
    margin-top: -7px;
    left: -20px;
    background-position: center;
    background-size: cover;
  }
  .nosigned{
    color: #333 !important;
    font-weight:500;
  }
  .signed{
    color: #999 !important;
  }
</style>
